import Vue from 'vue'
import App from './App.vue'

// 引入移动端布局的插件 rem 
// 将当前视口的尺寸除以10的值设置为 html 标签的font-size 的大小(也就是1rem的单位)
import 'amfe-flexible';
// 引入重置样式表
import '@/assets/css/reset.css'
// 因为全局都需要使用,所以在main.js 中引入
import less from 'less'
Vue.use(less)

// 引入vant UI 组件库 (全部导入) 
// 注意: 如果配置了自动按需引入的方式,那就不能再使用全局引入的方式了
import Vant from 'vant';
import 'vant/lib/index.css';
// 调用该方法后,就可以在全局使用vant 中的组件了
Vue.use(Vant);

// 按需导入项目中需要用到的所有组件(可以减少代码包的提交,项目优化的点)
// import { Icon, Form, Field, Button, Tabbar, TabbarItem } from "vant";
// Vue.use(Icon);
// Vue.use(Form);
// Vue.use(Field);
// Vue.use(Button);
// Vue.use(Tabbar);
// Vue.use(TabbarItem);

// 导入路由实例对象
import router from '@/router'

// 定义全局过滤器
Vue.filter('formatMoney', (val) => {
    return `$${val.toFixed(2)}元`
})

// 使用vant 自带的懒加载效果
// import { Lazyload } from 'vant';
// Vue.use(Lazyload);
// // 注册时可以配置额外的选项
// Vue.use(Lazyload, {
//     lazyComponent: true,
//     loading: '@/assets/images/loading.gif'
// });

//使用第三方的懒加载插件也可以实现懒加载
import Lazyload from 'vue-lazyload';
// console.log(1, require('./assets/loading.gif'));
Vue.use(Lazyload, {
    loading: require('./assets/loading.gif'),
})


// 引入 index.js (自定义的插件)
import Vant1 from '@/utils/index'
// Vue.use(参数) 调用参数中的install方法, 实现组件的全局注册或方法的全局调用
Vue.use(Vant1)

new Vue({
    render: h => h(App),
    router
}).$mount('#app')